<template>
  <div id="app" style="height:100%;">
    <title>{{title}}</title>
    <view-box ref="viewBox" :body-padding-top="bTop" body-padding-bottom="0px">
      <x-header
        :left-options="leftOptions"
        :title="title"
        slot="header"
        class="header"
        v-if="showXHeader">
      </x-header>
      <transition :name="transitionName">
        <router-view></router-view>
      </transition>
    </view-box>
    <loading v-model="isLoading"></loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import {ViewBox, XHeader} from 'vux'
  import {Loading} from 'vux'
  import {mapState} from 'vuex'
  import getSource from './views/login/js/getSource'

  export default {
    data() {
      return {
        transitionName: 'slide',
        showXHeader: true,
        bTop: "0"
      }
    },
    created() {
      if (getSource() === "WEI") {
        this.showXHeader = false;
        this.bTop = "0"
      } else if (getSource() == "IOS" || getSource() == "ANDROID") {
        this.showXHeader = false;
        this.bTop = "0"
      } else {
        this.showXHeader = true;
        this.bTop = "46px"
      }
    },
    components: {
      ViewBox,
      XHeader,
      Loading
    },
    watch: {
      // 监视路由，参数为要目标路由和当前页面的路由
      // to.path.length-1，因为首页路由为'/'，会分割成['',''],长度为2，和二级页面'/xxx'['','xxx']长度一样
      //-1后首页为['']长度1,二级页面['','xx']长度还是2
      '$route'(to, from) {
        //console.log(to.path.substring(0, to.path.length-1).split('/'));
        //console.log(to.path.substring(0, to.path.length).split('/'));
        const toDepth = to.path.substring(0, to.path.length - 1).split('/').length;
        const fromDepth = from.path.substring(0, from.path.length - 1).split('/').length;
        this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide';
        // 根据路由深度，来判断是该从右侧进入还是该从左侧进入
      }
    },
    computed: {
      leftOptions() {
        return {
          showBack: this.$route.path !== '/'
        }
      },
      title() {
        let arr = this.$route.path.split('/');
        console.log("arr:" + arr);
        console.log("this.$route.path:" + this.$route.path.indexOf("/index"));
        if (this.$route.path === '/') return '装修服务';
        if (this.$route.path.indexOf("/index") == 0) return '装修服务';
        if (this.$route.path === '') return '装修服务';
        if (this.$route.path === '/zxxx/zxxxinfolist') return '装修信息';
        if (this.$route.path === '/zxxx/InfoCreate') return '新增材料';
        if (this.$route.path === '//zxxx/InfoDetail') return '修改材料';
        if (this.$route.path === '/login') return '登录';
        if (this.$route.path === '/register') return '注册';
        if (this.$route.path === '/forget') return '忘记密码';
        if (this.$route.path === '/user') return '个人中心';
        if (this.$route.path === '/user/info') return '个人信息';
        if (this.$route.path === '/user/user-matter') return '我的办件';
        if (this.$route.path === '/user/appoint') return '我的预约';
        if (this.$route.path === '/user/appoint/detail') return '预约详细';
        if (this.$route.path === '/user/report') return '我的举报';
        if (this.$route.path.indexOf('missing/detail') == 0) return '寻人寻亲详情';
        if (this.$route.path.indexOf('lost/detail') == 0) return '失物招领详情';


        if (this.$route.path.indexOf('yjff/detail') == 0) return '预警防范详细';
        if (this.$route.path.indexOf('bulletin/detail') == 0) return '协查通报详细';
        if (this.$route.path.indexOf('news/detail') == 0) return '警务公开详细';

        if (this.$route.path.indexOf('/news/ffxc') == 0) return '防范宣传';
        if (this.$route.path.indexOf('/news/zx') == 0) return '警务公开';
        if (this.$route.path.indexOf('/news/yjff') == 0) return '预警防范';
        if (this.$route.path.indexOf('/news/tb') == 0) return '协查通报';

        if (this.$route.path.indexOf('trafficLimitList/jtgz') >= 0) return '交通管制';
        if (this.$route.path.indexOf('trafficLimitList/cxzn') >= 0) return '出行指南';
        if (this.$route.path.indexOf('NetPointCheck') >= 0) return '网点查询';
        if (this.$route.path.indexOf('NetPointCheckDetail') >= 0) return '网点详细信息';
        if (this.$route.path.indexOf('UnlockForHelp') >= 0) return '开锁求助';
        if (this.$route.path.indexOf('IdentityProcess') >= 0) return '身份证办理进度查询';
        if (this.$route.path.indexOf('residencePermit') >= 0) return '居住证办理进度查询';
        if (this.$route.path.indexOf('residence') >= 0) return '户口办理进度查询';
        if (this.$route.path.indexOf('suggestion') >= 0) return '意见建议';
        if (this.$route.path.indexOf('cxzn') >= 0) return '出行指南';
        if (this.$route.path.indexOf('dog_register') >= 0) return '养犬登记';

        if (arr.indexOf('trafficLimitDetail') >= 0) return '交通管制详情';
        if (arr.indexOf('citydiagram') >= 0) return '路况简图';
        if (arr.indexOf('matter') >= 0) return '事项指南';
        if (arr.indexOf('news') >= 0) return '警务公开';
        if (arr.indexOf('warning') >= 0) return '预警防范';
        if (arr.indexOf('bulletin') >= 0) return '协查通报';
        if (arr.indexOf('consult') >= 0) return '咨询服务';
        if (arr.indexOf('move-car') >= 0) return '自助移车';
        if (arr.indexOf('call110') >= 0) return '微信报警';
        if (arr.indexOf('report') >= 0) return '违法举报';
        if (arr.indexOf('name') >= 0) return '重名查询';
        if (arr.indexOf('ems') >= 0) return 'EMS查询';
        if (arr.indexOf('case') >= 0) return '办件查询';
        if (arr.indexOf('missing') >= 0) return '寻人寻亲';
        if (arr.indexOf('lost') >= 0) return '失物招领';
        if (arr.indexOf('cityHot') >= 0) return '城市热力图';
        if (arr.indexOf('traffic-violation-query') >= 0) return '车辆违章查询';
        if (arr.indexOf('driving-score') >= 0) return '驾驶证记分查询';
        if (arr.indexOf('traffic-message') >= 0) return '高速路况播报';
        if (arr.indexOf('real-time-traffic') >= 0) return '实时路况';
        if (arr.indexOf('lock-directory') >= 0) return '开锁业名录';
        if (arr.indexOf('entry-exit') > 0) return '出入境进度查询';
        if (arr.indexOf('entry-exit-handle') >= 0) return '出入境证件办理';
        if (arr.indexOf('declare-baby') >= 0) return '出生登记';
        if (arr.indexOf('purchase-house') >= 0) return '购房落户';
        if (arr.indexOf('residence') >= 0) return '居住证查询';
        if (arr.indexOf('moving-settled') >= 0) return '接迁（投靠）直系亲属落户';
        if (arr.indexOf('fill-do') >= 0) return '补办暂住（变更）登记';
        if (arr.indexOf('army-logout') >= 0) return '公民入伍注销户口';
        if (arr.indexOf('stable-job') >= 0) return '居住证申领';
        if (arr.indexOf('registration-parents') >= 0) return '大、中专院校学生毕业落户';
        if (arr.indexOf('out-province') >= 0) return '迁出省外';
        if (arr.indexOf('declare-temporary') >= 0) return '申报暂住（变更）登记';
        if (arr.indexOf('employment-settled') >= 0) return '实际就业落户';
        if (arr.indexOf('death-cancels') >= 0) return '死亡注销';
        if (arr.indexOf('minor-change-name') >= 0) return '项目变更更正';
        if (arr.indexOf('rent-house') >= 0) return '租房落户';
      },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        isLoading: state => state.isLoading
      })
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '../src/assets/css/base.less';
</style>
<style lang="less" scoped>
  [v-cloak] {
    display: none;
  }

  .header {
    width: 100%;
    position: absolute !important;
    left: 0;
    top: 0;
    z-index: 100;
  }

  /**
  * vue-router transition
  */
  .slide-enter,
  .slide_back-enter {
    position: absolute;
    width: 100%;
  }

  .slide-leave,
  .slide_back-leave {
    position: absolute;
    width: 100%;
  }

  .slide-enter-active,
  .slide_back-enter-active {
    transition: all .2s linear;
  }

  .slide-leave-active {
    position: absolute;
    transition: all .2s linear;
    transform: translateX(-100%);
  }

  .slide-enter {
    transform: translateX(100%);
  }

  .slide_back-leave-active {
    position: absolute;
    transition: all .2s linear;
    transform: translateX(100%);
  }

  .slide_back-enter {
    transform: translateX(-100%);
  }

  .weui-tab__panel {
    padding-bottom: 20px;
  }
</style>
